<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>解析csv文件</title>
		<script src="https://unpkg.com/papaparse@5.3.1/papaparse.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		文件：<br>
		<input type="file" id="file" onchange="bindFileSelect(this)"><br>
		<script type="text/javascript">
			function bindFileSelect(e){
				var file = e.files[0];
				readCsv(file,5,10,',').then(res=>{
					console.log("res",res)
				})
			}
			function readCsv(file, beginN, limit, separator) {
				let rowNum = 1
				let completeNum = 0
				let tempData = [] //预存数据，待格式转换
				let columns = [] //字段名，作为表头

				return new Promise((resolve, reject) => {
					//解析
					Papa.parse(file, {
						encoding: 'UTF-8',
						delimiter: separator, //分隔符
						// 大文件流式传输，每行解析都执行一遍
						step(res, parser) {
							const rdata = res.data
							
							// 去除最后的空行
							if (rdata == '') {
								return
							}
							
							// 第一行作为表字段
							if (rowNum == 1) {
								columns = rdata.map(
									(item) => ({
										label: item,
										prop: item
									})
								)
							} else if (rowNum > beginN) {
								//从第beginN行开始解析
								tempData.push(rdata)
							}
							
							// 超限停止解析，转换数据格式
							if (rowNum == beginN + limit) {
								//停止解析
								parser.abort();
								// csv 预览处理，解析为表json
								let csvData = tempData.map((item) => {
									var obj = {}
									columns.forEach((c, i) => {
										obj[c.prop] = item[i]
									})
									return obj
								})
								resolve({
									csvData,
									columns
								})
							}
							
							rowNum++
						},
						complete(){
							if(rowNum < beginN + limit){
								// csv 预览处理，解析为表json
								let csvData = tempData.map((item) => {
									var obj = {}
									columns.forEach((c, i) => {
										obj[c.prop] = item[i]
									})
									return obj
								})
								resolve({
									csvData,
									columns
								})
							}
						},
						error(err){
							reject(err)
						}
					})
				})
			}
		</script>
	</body>
</html>
